<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: gray;
				/*让a标签的可触控区域增大*/
				display: block;
			}

			#nav>.row {
				display: flex;
			}

			#nav>.row>.item {
				/*等分，并且文字居中*/
				flex: 1;
				text-align: center;
			}

			#nav>.row>.item>a:before {
				/*这里添加伪元素，并且居中显示*/
				content: "";
				display: block;
				margin: 0 auto;

				width: 86px;
				height: 86px;
			}

			#nav>.row:nth-child(1)>.item:nth-child(1)>a:before {background: url(img/01.png) no-repeat;}
			#nav>.row:nth-child(1)>.item:nth-child(2)>a:before {background: url(img/02.png) no-repeat;}
			#nav>.row:nth-child(1)>.item:nth-child(3)>a:before {background: url(img/03.png) no-repeat;}
			#nav>.row:nth-child(1)>.item:nth-child(4)>a:before {background: url(img/04.png) no-repeat;}
			#nav>.row:nth-child(1)>.item:nth-child(5)>a:before {background: url(img/05.png) no-repeat;}
			#nav>.row:nth-child(2)>.item:nth-child(1)>a:before {background: url(img/06.png) no-repeat;}
			#nav>.row:nth-child(2)>.item:nth-child(2)>a:before {background: url(img/07.png) no-repeat;}
			#nav>.row:nth-child(2)>.item:nth-child(3)>a:before {background: url(img/08.png) no-repeat;}
			#nav>.row:nth-child(2)>.item:nth-child(4)>a:before {background: url(img/09.png) no-repeat;}
			#nav>.row:nth-child(2)>.item:nth-child(5)>a:before {background: url(img/10.png) no-repeat;}
		</style>
	</head>
	<body>
		<div id="nav">
			<div class="row">
				<div class="item">
					<a href="#">舔狗</a>
				</div>
				<div class="item">
					<a href="#">聚划算</a>
				</div>
				<div class="item">
					<a href="#">舔狗国际</a>
				</div>
				<div class="item">
					<a href="#">外卖</a>
				</div>
				<div class="item">
					<a href="#">舔狗超市</a>
				</div>
			</div>
			<div class="row">
				<div class="item">
					<a href="#">充值中心</a>
				</div>
				<div class="item">
					<a href="#">海风旅行</a>
				</div>
				<div class="item">
					<a href="#">领金币</a>
				</div>
				<div class="item">
					<a href="#">拍卖</a>
				</div>
				<div class="item">
					<a href="#">分类</a>
				</div>
			</div>
		</div>
	</body>
</html>
